import { useState, useEffect } from 'react';
import { Card, Select, Typography, message, Empty, Alert, Spin, Row, Col } from 'antd';
import { useNavigate } from 'react-router-dom';
import CourseSignInManager from '@/components/CourseSignInManager';
import axios from 'axios';

const { Title, Text } = Typography;
const { Option } = Select;

const SignInManageNew = () => {
  const [courses, setCourses] = useState([]);
  const [selectedCourseId, setSelectedCourseId] = useState(null);
  const [selectedCourseName, setSelectedCourseName] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const navigate = useNavigate();

  // 获取课程列表
  const fetchCourses = async () => {
    setLoading(true);
    try {
      const response = await axios.get('/teacher/course/list');
      
      if (response.data && (response.data.code === 2000 || response.data.code === 0)) {
        const coursesData = response.data.data?.courses || [];
        setCourses(coursesData);
        
        // 默认选择第一个课程
        if (coursesData.length > 0) {
          setSelectedCourseId(coursesData[0].id);
          setSelectedCourseName(coursesData[0].name);
        }
      } else {
        setError(response.data?.message || '获取课程列表失败');
      }
    } catch (error) {
      console.error('获取课程列表出错:', error);
      message.error('获取课程列表失败，请重试');
      setError('网络错误，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  // 处理课程选择变化
  const handleCourseChange = (value, option) => {
    setSelectedCourseId(value);
    setSelectedCourseName(option.label);
  };

  // 页面加载时获取课程列表
  useEffect(() => {
    fetchCourses();
  }, []);

  return (
    <div className="sign-in-manage-container" style={{ padding: '20px' }}>
      <Title level={2}>签到管理</Title>
      
      {error && (
        <Alert
          message="错误"
          description={error}
          type="error"
          showIcon
          style={{ marginBottom: '16px' }}
        />
      )}

      <Card style={{ marginBottom: '16px' }}>
        <Row gutter={16} align="middle">
          <Col>
            <Text strong>选择课程：</Text>
          </Col>
          <Col flex="1">
            <Select
              placeholder="选择课程"
              value={selectedCourseId}
              onChange={handleCourseChange}
              style={{ width: '100%', minWidth: '200px' }}
              loading={loading}
              disabled={loading || courses.length === 0}
            >
              {courses.map(course => (
                <Option key={course.id} value={course.id} label={course.name}>
                  {course.name}
                </Option>
              ))}
            </Select>
          </Col>
        </Row>
      </Card>

      {loading ? (
        <div style={{ textAlign: 'center', padding: '40px' }}>
          <Spin size="large" />
        </div>
      ) : courses.length === 0 ? (
        <Empty 
          description="暂无课程数据" 
          style={{ backgroundColor: 'white', padding: '40px' }}
        />
      ) : !selectedCourseId ? (
        <Empty 
          description="请选择一个课程" 
          style={{ backgroundColor: 'white', padding: '40px' }}
        />
      ) : (
        <CourseSignInManager 
          courseId={selectedCourseId} 
          courseName={selectedCourseName} 
        />
      )}
    </div>
  );
};

export default SignInManageNew; 